<!DOCTYPE html>
<html>

<head>
  <style>
     body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }
    /* 定义banner容器样式 */
   .banner {
      position: relative;
      width: 500px;
      height: 300px;
      overflow: hidden;
    }

    /* 定义图片样式 */
   .banner img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: none;
    }

    /* 显示第一张图片 */
   .banner img:first-child {
      display: block;
    }
  </style>
</head>

<body>
  <!-- banner容器 -->
  <div class="banner">
    <!-- 这里放置要切换的图片 -->
    < img src="image1.jpg" alt="Image 1">
    < img src="image2.jpg" alt="Image 2">
    < img src="image3.jpg" alt="Image 3">
  </div>

  <script>
    // 获取所有图片元素

    const images = document.querySelectorAll('.banner img');
    let currentIndex = 0;

    // 定义切换函数

    function switchImage() {
      images[currentIndex].style.display = 'none';
      currentIndex = (currentIndex + 1) % images.length;
      images[currentIndex].style.display = 'block';
    }

    // 每隔3秒切换一次图片（可根据需求调整时间间隔）

    setInterval(switchImage, 1000);
  </script>
</body>

</html>